<script setup lang="ts">
import {onMounted} from "vue";
import echarts from "@/plugins/ECharts.ts";

onMounted(() => {
  initUserCharts();
  initDemoCharts();
  initPieCharts();
})

const initUserCharts = () => {
  const userCharts = echarts.init(document.getElementById('charts-user'));

  const option = {
    tooltip: {},
    grid: {
      left: '1%',
      right: '1%',
      bottom: '1%',
      top: '2%',
      containLabel: true
    },
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  // 绘制图表
  userCharts.setOption({ ...option });
}

const initDemoCharts = () => {
  const userCharts = echarts.init(document.getElementById('charts-demo'));
  // 绘制图表
  userCharts.setOption({
    tooltip: {},
    grid: {
      left: '1%',
      right: '1%',
      bottom: '1%',
      top: '2%',
      containLabel: true
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
}

const initPieCharts = () => {
  const userCharts = echarts.init(document.getElementById('charts-pie'));
  const option = {
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  // 绘制图表
  userCharts.setOption({...option});
}

</script>

<template>
  <div>
    <a-flex justify="space-between" align="center" wrap >
      <a-card style="width: 25%;min-width: 400px;">
        <template #title>
          <a-statistic title="日销量" :value="10" />
        </template>
        <template #extra>info</template>
        <template #actions>
          累计销售量 1,234
        </template>
        <div id="charts-demo" style="width: 100%;height: 150px;"></div>
      </a-card>
      <a-card style="width: 25%;min-width: 400px;">
        <template #title>
          <a-statistic title="日销量" :value="10" />
        </template>
        <template #extra>info</template>
        <template #actions>
          累计销售量 1,234
        </template>
        <div id="charts-pie" style="width: 100%;height: 150px;"></div>
      </a-card>
      <a-card style="width: 25%;min-width: 400px;">
        <template #title>
          <a-statistic title="日新增用户" :value="10" />
        </template>
        <template #extra>info</template>
        <template #actions>
          累计平台用户 1,234
        </template>
        <div id="charts-user" style="width: 100%;height: 150px;"></div>
      </a-card>
    </a-flex>
  </div>
</template>

<style scoped>

</style>